<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<title>PACKAGES — <{:C('site_title')}></title>
<meta name="keywords" content="<{:C('site_keyword')}>">
<meta name="description" content="<{:C('site_content')}>">
<include file="Public:cssjs" />
<script type="text/javascript" src="<{:STATICS}>/js/jquery.cookie.js"></script>
<script type="text/javascript" src="<{:STATICS}>/js/jquery.validate.min.js"></script>
<script src="<{:STATICS}>/centaurus/js/jquery.maskedinput.min.js"></script> 
<link rel="stylesheet" href="<{:RES}>/css/pay.css">
</head>
<script>
$(document).ready(function() {
	//validation验证
	$("form.form-validata").validate({
		errorElement: "p",
        errorClass: "error",
	})

});
</script>
<body>
<include file="Public:mobilemenu" />

<div id="siteWrapper">
	<div class="blackHeader">
	<include file="Public:menu" />
	</div>
	
	<div class="main">
		<form id="ajaxForm" action="<{:U('Pay/confirm')}>" method="post" class="eventForm form-validata">
		<volist name="list" id="vo">
		<div class="orderList" data-id="<{$vo.id}>">
			<div class="name"><{$vo.name}></div>
			<div class="close" data-price="<{$vo.price}>">X</div>
			<div class="price">$<{$vo.price}></div>		
			<input type="hidden" name="price[]" value="<{$vo.price}>">
			<input type="hidden" name="name[]" value="<{$vo.name}>">	
		</div>		
		</volist>

		<div class="orderTotal">Total<span>$<i id="totalMoney"><{$total}></i></span></div>

		<div class="orderLeft">			
			<div class="orderTitle">Billing Detail</div>
			<div class="form-group">
				<label>Name</label>
				<div class="form-contorl">
					<div class="w50"><input type="text" name="firstName" id="firstName" class="ipt" placeholder="First Name" value="<{$user.firstName}>" data-rule-required="true"></div>
					<div class="w50"><input type="text" name="lastName" id="lastName" class="ipt" placeholder="Last Name" value="<{$user.lastName}>" data-rule-required="true"></div>
				</div>	
			</div>

			<div class="form-group">
				<label>Address</label>
				<div class="form-contorl">
					<div class="w100">
						<input type="text" class="ipt" name="address" id="address" placeholder="Street Adress" value="<{$user.address}>" data-rule-required="true" data-rule-en="true">
					</div>					
				</div>	
				<div class="form-contorl">
					<div class="w100">
					<input type="text" class="ipt" name="address2" id="address2" placeholder="Apartment,State,Unit etc.(Optional)" value="<{$user.address2}>" data-rule-en="true">
					</div>
				</div>	
			</div>
			
			<div class="form-group">
				<div class="w33">
					<label>City</label>
					<div class="form-contorl">
						<input type="text" class="ipt" name="city" id="city" data-rule-required="true" value="<{$user.city}>"/>
					</div>
				</div>

				<div class="w33">
					<label>State</label>
					<div class="form-contorl">
						<select name="state" id="state" class="ipt" data-rule-required="true">
							<option value="">--select--</option>
							<volist name="state" id="vo">
							<option value="<{$vo.name}>"><{$vo.name}></option>
							</volist>
						</select>
					</div>
				</div>

				<div class="w33">
					<label>Zip Code</label>
					<div class="form-contorl">
						<input type="text" class="ipt" name="zip" id="zip" value="<{$user.zip}>" data-rule-required="true" data-rule-number="true"/>
					</div>
				</div>
					
			</div>

			<div class="form-group">
				<label>Phone</label>
				<div class="form-contorl">
					<div class="w100">
					<input type="text" class="ipt" name="phone" id="phone" value="<{$user.phone}>" data-rule-required="true">
					</div>
				</div>	
			</div>

			<script>
			$(function(){
				$("#phone").mask("+1(999) 999-9999");
			})
			</script>


			<div class="form-group">
				<label>Email</label>
				<div class="form-contorl">
					<div class="w100">
					<input type="text" class="ipt" name="email" id="email" data-rule-required="true" data-rule-email="true">
					</div>
				</div>	
			</div>
		</div>

		<div class="orderRight">
			<div class="orderTitle">Payment Instructions</div>
		</div>

		<div class="orderBtn">
			<button type="submit">Continue</button>
		</div>
		</form>


	</div>

	<include file="Public:footer" />	
</div>
<script>
$("#state").val("<{$user.state}>");
$(function(){
	$(".close").click(function(){
		$(this).parent().remove();
		$money = parseInt($("#totalMoney").html())-parseInt($(this).attr('data-price'));
		$money = $money.toFixed(2);
		$("#totalMoney").html($money);
		var cookieStr = '';
		$(".orderList").each(function(){
			if (cookieStr=='') {
				cookieStr = $(this).attr("data-id");
			}else{
				cookieStr = cookieStr + '|'+$(this).attr("data-id");
			}			
		})

		$.cookie('goodsID', cookieStr);			
		$.cookie('cartNumber', $(".orderList").length);	

		if ($(".orderList").length==0){
			window.location.href = '<{:U('Index/index')}>';
		};
	});
})
</script>
</body>
</html>